﻿﻿<template>
  <Container>
    <div class="user-info">
      <div class="left">
        <el-avatar
          class="avatar"
          :size="80"
          src="https://via.placeholder.com/80"
        />
        <el-tooltip
          :content="userinfo.note"
          placement="top"
        >
          <p class="bio-text">
            <strong>个人简介:</strong>
            <span class="ellipsis">{{ userinfo.note }}</span>
          </p>
        </el-tooltip>
        <!-- <el-button
          class="follow-button"
          type="primary"
          round
        >关注</el-button>
        <el-button
          class="follow-list-button"
          type="text"
          round
          @click="openFollowList"
        >关注:{{ followtotal }}</el-button>
        <el-button
          class="follow-list-button"
          type="text"
          round
          @click="openFansList"
        >粉丝:{{ fanstotal }}</el-button> -->
      </div>
      <div class="right">

        <div
          style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; width: 95%;"
        >
          <span style="font-size: 20px; font-weight: bold;">详细信息</span>
          <div style="display: flex; justify-content: flex-end; gap: 10px;">
            <!-- 编辑个人资料按钮和安全中心按钮到时候需要加上v-if="isMyProfile" -->
            <el-button
              type="primary"
              @click="editDetails"
            >
              编辑个人资料
            </el-button>
            <el-button
              type="primary"
              @click="openSecurityDialog"
            >
              安全中心
            </el-button>
          </div>
        </div>

        <el-descriptions
          :column="2"
          border
          style="width: 95%;"
        >
          <el-descriptions-item label="用户名">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userinfo.nam"
              placement="top"
            >
              <span class="ellipsis">{{ userinfo.nam }}</span>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="账号ID">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userinfo.id"
              placement="top"
            >
              <span class="ellipsis">{{ userinfo.id }}</span>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="被点赞数">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userinfo.like"
              placement="top"
            >
              <span class="ellipsis">{{ userinfo.like }}</span>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="学校">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userinfo.school"
              placement="top"
            >
              <span class="ellipsis">{{ userinfo.school }}</span>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="学院">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userinfo.academy"
              placement="top"
            >
              <span class="ellipsis">{{ userinfo.academy }}</span>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="信誉分">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userinfo.credit"
              placement="top"
            >
              <span class="ellipsis">{{ userinfo.credit }}</span>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="省份">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userinfo.province"
              placement="top"
            >
              <span class="ellipsis">{{ userinfo.province }}</span>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item label="城市">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userinfo.city"
              placement="top"
            >
              <span class="ellipsis">{{ userinfo.city }}</span>
            </el-tooltip>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <!-- 引入关注列表组件 -->
    <List
      v-model:visible="showFollowList"
      :listtype="listtype"
    />

    <!--编辑按钮组件-->
    <EditPage
      :visible="isEditDialogVisible"
      :userinfo="{nam:userinfo.nam,note:userinfo.note,school:userinfo.school,academy:userinfo.academy}"
      @close="isEditDialogVisible = false"
      @update="handleUpdateinfo"
    />

    <el-divider style="height: 1%; margin: 0;" />
    <main class="content">
      <div class="header">
        <h2>提问箱</h2>
      </div>

      <el-table
        :data="displayedItems"
        style="width: 100%;"
        :row-style="rowStyle"
        v-loading="loading"
      >
        <el-table-column
          prop="image"
          label="提问箱名称"
          width="200"
        >
          <template #default="scope">
            {{ scope.row.nam }}
          </template>
        </el-table-column>

        <el-table-column
          prop="id"
          label="ID"
          width="100"
        />
        <el-table-column
          prop="text"
          label="简介"
          width="500"
          show-overflow-tooltip
        />

        <el-table-column
          prop="url"
          label="链接"
          width="350"
        />

      </el-table>
      <securitydialog
        v-model="dialogVisible"
        :userinfo="userinfo"
      />
      <el-pagination
        @current-change="handlePageChange"
        :current-page="box_currentPage"
        :page-size="box_pageSize"
        layout="prev, pager, next"
        :total="box_total"
        class="pagination"
      />
    </main>
    <Footmenu />
  </Container>
</template>

<script>
import Container from '../components/main/container.vue';
import Footmenu from '../components/main/footmenu.vue';
import List from '../components/person/list.vue'; // 引入FollowList组件
import { ref, computed, onMounted } from 'vue';
import { get } from "@/net";
import EditPage from '../components/person/editPage.vue';
import securitydialog from '../components/person/Security.vue';
import { ElMessage } from 'element-plus';


import { useRoute } from "vue-router";
import { useAccountStore } from "@/store";
import { storeToRefs } from "pinia"; // 如果使用 Pinia

export default {
  name: 'Person',
  components: {
    Container, Footmenu, List, EditPage, securitydialog
  },
  setup () {
    const userinfo = ref({
      nam: "",
      id: "",
      like: 100,
      school: "",
      academy: "",
      credit: "",
      province: "",
      city: "",
      note: "",
    });
    const box_currentPage = ref(1);
    const box_pageSize = ref(10);
    const box_total = ref(50);
    const box_items = ref([]);
    const rowStyle = { height: '120px' };
    const aid = ref(1);
    const showFollowList = ref(false);// 控制关注列表弹窗的显??
    const followtotal = ref(0);//关注数
    const fanstotal = ref(0);//粉丝数
    const listtype = ref(0);//关注列表/粉丝列表
    const dialogVisible = ref(false);// 浮窗的显示状态


    const route = useRoute();
    const accountStore = useAccountStore(); // 获取 store
    const { account } = storeToRefs(accountStore); // 从 store 中取出 `account`
    // 获取查询参数 userId
    const userId = computed(() => route.query.userId);
    // 判断是我的信息还是他人的信息
    const isMyProfile = computed(() => {
      return userId.value === account.value.id; // 比较 route.query.userId 和 account.id
    });


    const fetchUserinfo = async (params) => {
      get(
        "/account/get_info", {},
        (message) => {
          userinfo.value = message.data;
        },
        () => {
          store.clearAccount();
        }
      );
    };

    // 获取关注数/粉丝数
    const get_count = async (params) => {
      get(
        "/account/get_concern_info", {},
        (message) => {
          followtotal.value = message.data.total;
          fanstotal.value = message.data.total;
        },
        () => {
          store.clearAccount();
        }
      );
    };

    // 点击关注列表按钮时，打开弹窗并获取关注列表数??
    const openFollowList = (params) => {
      listtype.value = 0;
      showFollowList.value = true;
    };
    const openFansList = (params) => {
      listtype.value = 1;
      showFollowList.value = true;
    };

    const fetchBoxData = async () => {
      get(
        "/question_box/get_my_create_question_box", {},
        (message) => {
          console.log(message.data);
          box_items.value = message.data.boxes;
          box_total.value = message.data.total;
        },
        () => {
          store.clearAccount();
        }
      );
    };

    onMounted(() => {
      fetchUserinfo();
      fetchBoxData();
      get_count();
    });

    const displayedItems = computed(() => {
      const start = 0;
      const end = start + box_pageSize.value;
      return box_items.value.slice(start, end);
    });
    const handlePageChange = (page) => {
      box_currentPage.value = page;
      console.log('褰撳墠椤??:', page);
      fetchBoxData();
    };


    // 控制编辑弹窗的显示状态
    const isEditDialogVisible = ref(false);
    // 定义 editQuestionBox 函数
    const editDetails = () => {
      isEditDialogVisible.value = true;    // 显示编辑弹窗
    };

    //编辑提问箱
    const handleUpdateinfo = (updatedData) => {
      //need fill 先发送给服务器请求，服务器响应成功后再渲染
      // 强制触发响应式更新
      userinfo.value = Object.assign({}, userinfo.value, {
        nam: updatedData.nam,
        note: updatedData.note,
        school: updatedData.school,
        academy: updatedData.academy,
        province: updatedData.province,
        city: updatedData.city,
      });
      ElMessage.success('个人信息已更新！');
      isEditDialogVisible.value = false;  // 关闭弹窗
    };
    const openSecurityDialog = () => {
      dialogVisible.value = true;
    };
    return {
      userinfo,
      box_currentPage, box_total, box_pageSize,
      displayedItems, handlePageChange,
      rowStyle,
      openFollowList, openFansList, listtype, get_count, showFollowList, followtotal, fanstotal,
      editDetails, isEditDialogVisible, handleUpdateinfo, openSecurityDialog, dialogVisible,
      isMyProfile,
    };

  },
}
</script>


<style scoped>
.bio-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
}

.separator {
  width: 100%;
  height: 0.1%;
  background-color: #ddd; /* 分隔线颜?? */
  margin: 1% 0; /* 分隔线上下间?? */
}
.user-info {
  display: flex;
  align-items: flex-start;
  padding: 1%;
  background-color: #ffffff;
  border-radius: 8px;
  width: 100%;
  margin-bottom: 20px;
  height: 28%; /* 固定高度 */
}

.left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* ??????з?????????? */
  align-items: center; /* ????????? */
}

.avatar {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  border-radius: 50%;
}
.follow-list-button {
  color: #ebca0d;
}
.right {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content {
  height: 55.2%;
  padding: 1%;
  background-color: #ffffff; /* 确保表格区域背景为白?? */
}
.el-table {
  height: 80%;
}
.header {
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination {
  height: 10%;
  display: flex;
  justify-content: center;
}
.ellipsis {
  display: inline-block;
  max-width: 150px; /* 限制最大宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 强制不换行 */
}
</style>